import React from 'react';
import { Table, message } from 'antd';

import configs from '../../../../utils/configs';


const columns = [{
  title: '帐号',
  dataIndex: 'username',
  key: 'username',
  width: 150,
}, {
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
  width: 150,
}, {
  title: '号码',
  dataIndex: 'phone',
  key: 'phone',
  width: 200,
}, {
  title: '邮件',
  dataIndex: 'email',
  key: 'email',
  width: 200,
}, {
  title: '站点',
  dataIndex: 'website',
  key: 'website',
  width: 200,
}, {
  title: '操作',
  key: 'action',
  render: (text, record) => (
    <span>
      删除({text.id})
      <span className="ant-divider" />
      修改({record.email})
    </span>
  ),
  width: 100,
}];

// rowSelection object indicates the need for row selection
const rowSelection = {
  // onChange: (selectedRowKeys, selectedRows) => {
  //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  // },
  // onSelect: (record, selected, selectedRows) => {
  //   console.log(record, selected, selectedRows);
  // },
  // onSelectAll: (selected, selectedRows, changeRows) => {
  //   console.log(selected, selectedRows, changeRows);
  // },
  getCheckboxProps: record => ({
    disabled: record.website === 'ramiro.info',    // Column configuration not to be checked
  }),
};


const HomePageTable = React.createClass({
  getInitialState() {
    return {
      current: 1,
      pageSize: 10,
      data: [],
      pagination: {
        total: 0,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => {
          this.state.current = current;
          this.state.pageSize = pageSize;
        },
        onChange: (current) => {
          this.state.current = current;
        },
      },
      loading: false,
    };
  },
  componentDidMount() {
    this.fetchData();
  },
  fetchData(params = {}) {
    this.setState({ loading: true });
    fetch(configs.typicode + '/users', {
      // method: 'POST',
      // headers: {
      //   'Content-Type': 'application/json'
      // },
      body: params // JSON.stringify({ name: 'Hubot', login: 'hubot',})
    }).then(function(response) {
      return response.json();
    }).then(json => this.dataAction({ json })).catch(function(ex) {
      message.info(ex);
    });
  },
  dataAction(datas) {
    const pagination = this.state.pagination;
    pagination.total = 500 * 123;// datas.length;
    this.setState({
      loading: false,
      data: datas.json,
      pagination,
    });
  },
  handleTableChange(pagination, filters, sorter) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetchData({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  },
  render() {
    return (
      <Table
        columns={columns}
        rowKey={record => record.id}
        dataSource={this.state.data}
        pagination={this.state.pagination}
        loading={this.state.loading}
        onChange={this.handleTableChange}
        // ${address.city} ${address.street} ${address.suite} (${address.zipcode})
        expandedRowRender={record =>
          <p>
            My name is {record.name},
            I’m houres it is
            {record.address.city} {record.address.street} {record.address.suite}
            ({record.address.zipcode} geo:(lat:{record.address.geo.lat},
            lng:{record.address.geo.lng})).
            <br />
            My Company name’s {record.company.name},
            catchPhrase: {record.company.catchPhrase},
            bs: {record.company.bs}.
          </p>
        }
        bordered
        title={() => '模拟异步数据加载'}
        footer={() => '模拟异步数据加载'}
        rowSelection={rowSelection}
      />
    );
  },
});

export default HomePageTable;
